<template>
  <div class="tag-require-origin">
    <div :class="{ 'download-table': isDownload }">
      <tag-content-header search refresh add @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span>原始标签需求列表</span>
        </template>
        <template #toolsPre>
          <el-radio-group v-model="listType">
            <el-radio label="userRequireList">我提交的</el-radio>
            <el-radio label="userHandleList">等我处理</el-radio>
            <el-radio label="pageList">全部</el-radio>
          </el-radio-group>
          <el-tooltip effect="dark" content="导出标签" placement="top" slot="reference">
            <el-button type="primary" plain circle @click="isDownload = !isDownload">
              <icon-svg name="iconDownload"></icon-svg>
            </el-button>
          </el-tooltip>
        </template>
      </tag-content-header>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :params="params"
        :total="totalSize"
        @rowClick="rowClick"
        :selection="isDownload"
        rowKey="requireId"
      >
        <template #requireStatus="{ scope }">
          <span class="cell-dot" :style="{ backgroundColor: dot[scope.row.requireStatus] }"></span>
          {{ scope.row.requireStatus | statusFormattey }}
        </template>
        <template #requireType="{ scope }">
          <span class="circle" :class="{ red: scope.row.requireType === '0' }"></span>
          {{ scope.row.requireType === '0' ? '新增' : '改造' }}
        </template>
      </tag-table>
      <el-button type="primary" size="medium" class="download-btn" v-if="isDownload" @click="downloadResult">
        确定导出
      </el-button>
      <creation-selection ref="creationSelection" :selections="selections" @select="selectWay"></creation-selection>
      <require-enroll ref="requireEnroll" @callback="getList"></require-enroll>
      <enroll-batch ref="enrollBatch" @callback="getList"></enroll-batch>
    </div>
  </div>
</template>

<script>
import creationSelection from '@/components/tag-creation-selection'
import requireEnroll from './single/require-enroll'
import enrollBatch from './batch/require-enroll-batch'
export default {
  components: {
    creationSelection,
    requireEnroll,
    enrollBatch
  },
  data() {
    return {
      selections: {
        title: '如何新增需求？',
        single: {
          head: '在线登记原始标签需求',
          content:
            '原始标签需求由标签用户填写指定内容进行创建，经需求管理员、标签开发部门分析、筛选后，成为正式的标签需求进入开发阶段。'
        },
        batch: {
          head: '通过登记模板批量导入多个标签需求',
          content: '下载并填写需求登记模板，一次性导入多个标签需求。经过标签需求部门及IT开发部门审批后进行标签开发。'
        }
      },
      listType: 'userRequireList',
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '需求名称',
          prop: 'tagNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '状态',
          prop: 'requireStatus',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [
            { key: '草稿', value: '1' },
            { key: '已提交，暂未受理', value: '2' },
            { key: '已受理', value: '3' }
          ],
          align: 'center'
        },
        {
          show: true,
          label: '类型',
          prop: 'requireType',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [{ key: '改造', value: '1' }, { key: '新增', value: '0' }],
          align: 'center'
        },
        {
          show: true,
          label: '申请人',
          prop: 'requirer',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '申请时间',
          prop: 'requireTm',
          search: true,
          searchKey: '',
          searchType: 'daterange',
          align: 'center'
        },
        {
          show: true,
          label: '处理时间',
          prop: 'handleTm',
          search: true,
          searchKey: '',
          searchType: 'daterange',
          align: 'center'
        }
      ],
      dot: {
        '1': '#ff99c3',
        '2': '#8b6cf3',
        '3': '#50abdf'
      },
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      isDownload: false
    }
  },
  watch: {
    listType() {
      if (this.isDownload) this.$refs.table.clearSelect()
      this.getList()
    },
    isDownload(val) {
      if (!val) this.$refs.table.clearSelect()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    selectWay(way) {
      if (way === 'Single') this.$refs.requireEnroll.showDrawer()
      else this.$refs.enrollBatch.showDrawer()
    },
    rowClick(row) {
      if (row.requireId) this.handleEdit(row)
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astOriginalRequire/${this.listType}`),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          if (this.isDownload) return
          this.$refs.creationSelection.showDialog()
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          if (this.isDownload) this.$refs.table.clearSelect()
          this.getList()
          break
      }
    },
    downloadResult() {
      let selectedRow = this.$refs.table.getSelectList()
      if (!selectedRow.length) {
        this.$message.error('请选择需要导出的标签！')
        return
      }
      let tagList = []
      selectedRow.forEach(item => {
        tagList.push(item.requireId)
      })
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astOriginalRequire/download'),
        method: 'post',
        data: this.$ajax.setData({
          tagList
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data)
          this.$message.success(data.msg)
          this.$refs.table.clearSelect()
          this.isDownload = false
          this.getList()
        } else {
          this.$message.error(data.msg)
        }
        this.loading = false
      })
    },
    handleEdit(item) {
      this.$refs.requireEnroll.showDrawer(item)
    }
  },
  filters: {
    statusFormattey(val) {
      let label = ''
      switch (val) {
        case '1':
          label = '草稿'
          break
        case '2':
          label = '已提交，暂未受理'
          break
        case '3':
          label = '已受理'
          break
      }
      return label
    }
  }
}
</script>

<style lang="scss">
.tag-require-origin {
  position: relative;
  .download-btn {
    position: absolute;
    right: 10px;
    bottom: 0;
  }
  .download-table {
    .el-pagination {
      margin-right: 100px;
    }
    .addBtn {
      border-color: #939393;
      background-color: #909399;
    }
  }
}
</style>
